<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="22">
          <el-form-item label="所在部门" prop="departmentOrgId"  class="item">
            <span>{{form.departmentOrgName}}</span>
          </el-form-item>
        </el-col>
    </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="项目指南编号" prop="projectGuideNumber"  class="item">
            <span>{{form.projectGuideNumber}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="申报类型" prop="declarationType"  class="item">
            <span>{{declarationTypeFormat(form.declarationType)}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="课题负责人" class="item" >
           <span>{{form.projectLeader}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="职称" class="item" >
           <span>{{form.ownerTitle}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系电话" class="item" >
           <span>{{form.ownerPhone}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="邮箱" class="item" >
           <span>{{form.ownerEmail}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="技术人员" class="item" >
           <span>{{labTechnologyFormat(form.labTechnology)}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="课题关键词" class="item" >
           <span>{{form.subjectKeywords}}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <hr>
        <div class="form_title">
          <p>其他成员</p>
        </div>
      <div class="form_table">
          <el-table :data="form.labProjectWorkResearchPersonnels" style="width: 100%"
            :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="number" label="编号" ></el-table-column>
            <el-table-column prop="name" label="姓名" width="100px" ></el-table-column>
            <el-table-column prop="ownerTitle" label="职称" ></el-table-column>
            <el-table-column prop="ownerEmail" label="邮箱" ></el-table-column>
            <el-table-column prop="contactPhone" label="联系电话" ></el-table-column>
         </el-table>
       </div>
        <hr>


    </el-form>
  </div>
</template>
<script>
import {getByNo} from "@/api/labbase/instrumentation"
import {searchEmployee} from "@/api/labdata/employee";
import {treeselect } from "@/api/labdata/orgnization";
import Treeselect from "@riophae/vue-treeselect";
import { getOrgName} from "@/api/labdata/orgnization";

  export default {
    name: "ProjectWorkSearchDetail",
    components:{Treeselect},
    data() {

      return {
        //申报类型
        declarationTypeOptions: [],
        //实验技术人员
        laboratoryTechniciansOptions: [],
          // 部门树选项
       deptOptions: [],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          projectOwnerId: [
          { required: true, message: "工(学)号不能为空", trigger: "blur" }
        ],
        contactPhone: [
          { required: true, message: "联系电话不能为空", trigger: "blur" }
        ],
        ownerEmail: [
         { required: true, message: '请输入邮箱地址', trigger: 'blur' },
         { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        subjectKeywords: [
        { required: true, message: "课题关键词不能为空", trigger: "blur" }
        ]

        }
      };
    },
    props:{
      workResearch:Object,
    },
    created() {
      this.getDicts("declaration_type").then(response => {
      this.declarationTypeOptions = response.data;
    });
      this.getDicts("laboratory_technicians").then(response => {
      this.laboratoryTechniciansOptions = response.data;
    });
      if(this.workResearch){
        this.form = this.workResearch;
        this.searchUser();
        this.getDeptName();
      }else{
        this.form  = {};
      }
    },
    methods: {
      getWorkResearch(){
        return this.form;
      },
      getDeptName(){
        getOrgName(this.form.departmentOrgId).then(response=>{
          this.form.departmentOrgName = response.msg;
          this.$forceUpdate();
        });
      },
      // 输入工号搜索
      searchUser(){
        if(!this.form.projectOwnerId){
          this.form.projectLeader = null;
          this.form.ownerTitle = null;
          return;
        }
         searchEmployee(this.form.projectOwnerId).then(response=>{
           let searchResult = response.data;
           if(searchResult){
             this.form.projectLeader = searchResult.nickName;
             this.form.ownerTitle =searchResult.title
           }else{
             this.form.projectLeader = null;
             this.form.ownerTitle = null;
           }
           //强制刷新
           this.$forceUpdate();
          });
      },

       //新增参与人员清单
       addLabProjectWorkResearchPersonnels() {
        let obj = {};
        obj.number = "";
        obj.name = "";
        obj.ownerTitle = "";
        obj.ownerEmail = "";
        obj.contactPhone = "";
        this.form.labProjectWorkResearchPersonnels.push(obj);
      },
      //删除当前行费用清单
      delLabProjectWorkResearchPersonnels(index) {
        this.form.labProjectWorkResearchPersonnels.splice(index, 1);
      },

      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },

      // 申报类型翻译
      declarationTypeFormat(value) {
        var  datas = this.declarationTypeOptions
        for(let key in datas){
            if(datas[key].dictValue == value){
                return datas[key].dictLabel;
            }
        }
        return "";
     },

      // 实验技术人员翻译
      labTechnologyFormat(value) {
        var  datas = this.laboratoryTechniciansOptions
        for(let key in datas){
            if(datas[key].dictValue == value){
                return datas[key].dictLabel;
            }
        }
        return "";
     },

    }

  };
</script>
<style type="text/css" scoped>
  .form_long {
    width: 505px;
  }

  .form_short {
    width: 200px;
  }

  .el-button.active {
    text-decoration: underline;
    color: #0000ee;
  }

  .hintItem {
    line-height: 30px;
  }

  .purchase_s_view {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .table_button {
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    line-height: 20px;
    border-bottom: 1px solid #f6f5f5;
    color: #43bef8;
    cursor: pointer;
    border: 0;
  }
  /deep/ .el-form-item {
    margin-bottom: 5px;
  }
</style>
